<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: pie2
 * @LastEditTime: 2021-11-09 16:03:24
 * @FilePath: \tianjushi-kanban\src\components\charts\Pie2.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed,nextTick, version } from "vue";
import { resetChartStyle, showLoading,hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    }, 
    chartdata:{
      type: Array,
      default: [{value:100,name:'A'},{value:100,name:'B'},{value:100,name:'C'},{value:100,name:'D'}],
    }, 
    color:{
      default:['#1F9EFF', '#1BC85E', '#FFC107', '#FF6C6B'],
      type: Array,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    unit:{
      type: String,
      default: "kg",
    }
  },
  setup: function (props, context) { 

    let chartInstance = null; //折线不能用响应式接收echart 
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    }); 
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
       const option = {

						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						color: props.color,
						series: [{
							name: props.title,
							type: 'pie',
							radius: ['32%', '56%'], //饼图的半径
							center: ['50%', '50%'],
							avoidLabelOverlap: true, ////是否启用防止标签重叠

							label: {
								normal: {
									show: true,
									//position: 'inside',
									formatter: '{b}\n{c}'+props.unit+'\n{d}%',
									textStyle: {
										align: 'center',
										baseline: 'middle',
										fontFamily: '微软雅黑',
										color:'#dedede',
										fontSize: 20,
										fontWeight: 'bolder'
									}
								}
							},
							data: props.chartdata,
							itemStyle: {
								normal: {
									borderColor: '#1e2239',
									borderWidth: 1.5,
								},
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}, {
							name: '',
							type: 'pie',
							silent: true,
							// minAngle: 180, //最小的扇区角度（0 ~ 360）
							center: ['50%', '50%'], //饼图的中心（圆心）坐标
							radius: [0, '30%'], //饼图的半径
							itemStyle: { //图形样式
								normal: {
									borderColor: '#1e2239',
									borderWidth: 1.5,
									opacity: 0.5,
								}
							},
							label: { //标签的位置
								normal: { 
									show: false,
								}
							},
							data: props.chartdata
						}
						]
					};
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => { 
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance); 
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>